<template>
  <div
    ref="node"
    :style="nodeContainerStyle"
    :class="{'flow-node-container': true,'flow-node-active': flowNodeActive}"
    @mouseenter="mouseEnter=true"
    @mouseleave="mouseEnter=false"
    @click="clickNode"
    @mouseup="changeNodeSite"
  >
    <!-- 标识节点类型的图标 -->
    <div class="flow-node-ico flow-node-drag">
      <img
        v-if="node.icon"
        class="flow-node-drag"
        :class="node.valid?'':'gray'"
        :src="node.icon"
        alt="无图片"
      />
      <!-- <i :class="nodeIcoClass"></i> -->
    </div>
    <!-- 显示的节点名称 -->
    <div class="flow-node-text" :show-overflow-tooltip="true">{{ node.name }}</div>
    <!-- 鼠标移入到节点中显示删除图标 -->
    <div v-show="mouseEnter&&!getReadOnlyFlag" class="flow-node-right-ico" @click.stop="deleteNode">
      <i class="el-icon-error"></i>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    node: Object,
    activeNodeId: String
  },
  data() {
    return {
      state: false,
      mouseEnter: false
    };
  },
  computed: {
    ...mapGetters(["getReadOnlyFlag"]),
    // 计算是否是激活的节点
    flowNodeActive() {
      return this.activeNodeId === this.node.id;
    },
    // 节点容器样式
    nodeContainerStyle() {
      return {
        top: this.node.top,
        left: this.node.left
      };
    }
  },
  watch: {
    node: {
      handler(val) {
        this.node = val;
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 删除节点
    deleteNode() {
      if (this.getReadOnlyFlag) {
        return false;
      }
      this.$emit("deleteNode", this.node);
    },
    // 点击节点
    clickNode() {
      this.$emit("clickNode", this.node);
    },
    // 鼠标移动后抬起
    changeNodeSite() {
      // 避免抖动
      if (
        this.node.left == this.$refs.node.style.left &&
        this.node.top == this.$refs.node.style.top
      ) {
        return;
      }
      this.$emit("changeNodeSite", {
        nodeId: this.node.id,
        left: this.$refs.node.style.left,
        top: this.$refs.node.style.top
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.flow-node-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 106px;
  height: 121px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px; /*no*/
  background-color: #fff;
  border: 1px solid #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flow-node-container:hover {
  /* 设置移动样式*/
  cursor: move;
  border: 1px dashed #1879ff;
}

/*激活状态*/
.flow-node-active {
  background-color: #f0f7ff;
  background-color: #f0f7ff;
  border: 1px solid #1879ff;
  box-shadow: 0 2px 12px 0 rgba(24, 121, 255, 0.5);
}
.flow-node-ico {
  background-color: transparent;
}
.flow-node-ico img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* line-height: 32px;
  margin-left: 8px; */
}

.flow-node-ico:hover {
  /* 设置拖拽的样式 */
  cursor: crosshair;
}

.flow-node-text {
  color: #666666;
  font-size: 14px;
  width: 100px;
  /* 设置超出宽度文本显示方式*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.flow-node-right-ico {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #797979;
  cursor: pointer;
}
.flow-node-right-ico i {
  font-size: 18px;
}
.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  opacity: 0.7; //通过改变透明度来调节灰色的程度
}
</style>
